<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">修改密码</block>
		</cu-custom>
		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<view class="view-sin">
				<view class="r-title">
					<text>输入密码</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input">
					<u-input :password-icon="false" v-model="password" type="password" placeholder="请输入密码"></u-input>
				</view>
			</view>

			<view class="view-sin" v-if="password">
				<view class="r-title">
					<text></text>
					<text style="color: red"></text>
				</view>
				<view
					class="flex-vc"
					:style="{
						color: passwordPass ? 'green' : 'red'
					}"
					>{{ passwordPass ? '密码安全通过' : '密码安全强度弱' }}</view
				>
			</view>

			<view class="view-sin">
				<view class="r-title">
					<text>核对密码</text>
					<text style="color: red">*</text>
				</view>
				<view class="r-input">
					<u-input :password-icon="false" v-model="passwordAga" type="password" placeholder="请输入密码"></u-input>
				</view>
			</view>
			<view class="w100 flexD-cc mt30" style="color: #888">
				<text> 请设置8至20位包含大小写字母、数字、特殊符号的密码</text>
				<text>(例:Abc123@def)</text>
			</view>
			<view class="view-btn" @click="userOps">确认修改</view>
		</view>
	</view>
</template>
<script>
	import SelectArea from '@/components/common/select/SelectArea.vue'
	import listSelect from '@/components/common/select/listSelect.vue'
	import userMagApi from '@/api/user/userMag'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	export default {
		name: 'personMag',
		components: {
			SelectArea,
			listSelect,
			baTreePicker
		},
		data() {
			return {
				type: '',
				appHeight: 0,
				title: '',
				userInfo: {
					deptId: '', //机构id
					deptName: '', // 机构名称
					email: '', //邮箱
					nickName: '', //用户名
					userName: '', //账户
					password: '', //密码
					phone: '', //电话
					projectId: 'e3cc3a226021fdc238bb32550647d767', //项目id
					remarks: '', //备注
					roles: [], //角色数组[角色id]
					sex: '0', //性别（0男1女）
					status: '0' //状态（0正常1停用）
				},
				passwordAga: '',
				password: ''

				// passwordPass: false
			}
		},
		computed: {
			passwordPass() {
				return this.validatePassword(this.password)
			}
		},
		async onLoad(options) {
			if (options && options.data) {
				let postData = JSON.parse(decodeURIComponent(options.data))
				if (postData.id) {
					const userInfoRes = await userMagApi.getUserPower(postData.id)
					this.userInfo = userInfoRes.data.result
					// this.password = userInfoRes.data.result.password
				}
			}
		},
		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')

			// this.yehuoLogin()
		},
		methods: {
			async userOps() {
				if (!this.valuePass()) {
					return
				}
				// 修改密码
				const mima = await userMagApi.resetPwd({
					id: this.userInfo.id, // 用户id
					password: this.password
				})
				if (mima.msg) {
					uni.showToast({
						icon: 'info',
						title: '操作成功'
					})
				}
			},
			changePass() {
				if (this.password) {
					this.passwordPass = this.validatePassword(this.password)
					console.info(`	this.passwordPass:`, this.passwordPass)
				}
			},
			validatePassword(password) {
				var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d])[\w\d\S]{8,20}$/
				return passwordRegex.test(password)
			},

			valuePass() {
				if (this.password == '' || this.passwordAga == '') {
					uni.showToast({
						icon: 'error',
						title: '请输入密码'
					})
					return false
				}
				if (!this.validatePassword(this.password)) {
					uni.showToast({
						icon: 'error',
						title: '密码安全强度弱'
					})
					return false
				}
				if (this.password != this.passwordAga) {
					uni.showToast({
						icon: 'error',
						title: '两次密码不一致'
					})
					return false
				}
				return true
			}
		}
	}
</script>
<style lang="less">
	.app-box {
		position: relative;
		overflow: hidden;
		width: 750rpx;
		.r-input-disabled {
			background: rgba(174, 174, 174, 0.3) !important;
		}
		.view-sin {
			margin-top: 30rpx;
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			.r-title {
				width: 154rpx;
				text-align: left;
			}
			.r-input {
				width: 520rpx;
				height: 60rpx;
				border-radius: 4rpx;
				border: 1rpx solid #aeaeae;
				background: #fff;
				align-items: center;
				display: flex;
				padding-left: 10rpx;
			}
			.r-input-box {
				width: 520rpx;
				border-radius: 4rpx;
				border: 1rpx solid #aeaeae;
				background: #fff;
				align-items: center;
				display: flex;
				padding-left: 10rpx;
			}
		}
		.view-btn {
			width: 636rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
			background: #41a4ff;
			backdrop-filter: blur(15px);
			text-align: center;
			line-height: 80rpx;
			margin: 80rpx auto;
			color: #fff;
		}
	}
</style>
